<template>
	<!-- 首页顶部 -->
	<scroll-view scroll-="true" class="nav-bar" show-scrollbar="false">
		<view v-for="(Item,index) in navItems" :key="index" 
		:class="['navItem', { active: activeIndex === index }]" @click="selectNav(index)">
			{{Item}}
		</view>
<!-- 		<view class="nav-item">首页</view>
		<view class="nav-item">电影</view>
		<view class="nav-item">电视剧</view>
		<view class="nav-item">综艺</view>
		<view class="nav-item">动漫</view> -->
	</scroll-view>
	<!-- 内容区域 -->
	<view class="content">
		<view v-if="activeIndex === 0">首页内容</view>
	    <view v-else-if="activeIndex === 1">电影分类内容</view>
	    <view v-else-if="activeIndex === 2">电视剧分类内容</view>
		<view v-else-if="activeIndex === 3">综艺分类内容</view>
		<view v-else-if="activeIndex === 4">动漫分类内容</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
            navItems: ['首页', '电影', '电视剧', '综艺', '动漫'], // 导航项
            activeIndex: 0, // 当前选中的导航项索引
			};
		},
		methods:{
			selectNav(index) {
			        this.activeIndex = index; // 更新选中状态
			}
		},
		onLoad() {

		},
		onNavigationBarSearchInputClicked() {
			console.log("点击搜索框")
			uni.navigateTo({
				url:"/pages/search/search"
			})
		},
		onNavigationBarButtonTap() {
			console.log("点击按钮")
			uni.navigateTo({
				url:"/pages/downloads/downloads"
			})
		},
	}
</script>

<style >
.nav-bar {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    overflow-x: scroll;
    background-color: #ffffff;
    padding: 10px 0;
}

.navItem {
	flex: 1;
	text-align: center;
	padding: 10px;
	cursor: pointer;
	
    display: inline-block;
    margin: 0 5px;
    background-color: #ffffff;
	border-radius: 5px;
}

.navItem.active {
  color: #007aff;
  font-weight: bold;
  border-bottom: 2px solid #007aff;
}

.content {
  padding: 20px;
}
</style>
